<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Add card</title>
    <link rel="stylesheet" href="./common.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/gsap@latest"></script>
</head>

<body>
    <div class="pd12">
        <div class="top flex_x start ">
            <a href="./flightDetail.html"><img src="./static/image/left.png" alt=""></a>
            <span style="margin-left: 10vw;">Add card </span>
        </div>
        <div class="t_area mt_20 flex_y between">
            <div class="a_top flex_x between">
                <div class="a_title">RM 500</div>
                <div class="a_right">
                    <span>Time left </span>
                    <span> 00:05:00</span>
                </div>
            </div>
            <div class="n">One-way </div>
            <div class="n">Bei Jing - Kuala Lumpur Wednesday,July 19 </div>
            <div class="n">1 Traveler</div>
        </div>
        <div class="title">Choose Payment option</div>
       <a href="./payment.html">
        <div class="a_item mt_20 flex_x between">
            <span>Debit / Credit card</span>
            <img src="./static/image/cardaa.png" alt="">
        </div>
       </a>
        <div class="a_item mt_20 flex_x between">
            <span>Internet Banking</span>
            <img src="./static/image/a1.png" alt="">
        </div>
        <div class="a_item mt_20 flex_x between">
            <span>Apple Pay</span>
            <img src="./static/image/a11.png" alt="">
        </div>
        <div class="a_item mt_20 txt_center">
            <span>+     Add another option</span>
        </div>
    </div>
</body>
<script>
    gsap.from(".top  img", {
        duration: .5,
        y: 100,
        x: 100
    });

</script>
<style>
    .top img {
        width: 8px;
        height: 11px;
        margin-right: 115px;
    }

    .top {
        font-size: 15px;
        align-items: center;
    }

    .t_area {
        border-radius: 13px;
        background: #FFF;
        width: 350px;
        height: 156px;
        flex-shrink: 0;
        padding: 20px;
        box-sizing: border-box;
    }

    .a_top {
        align-items: center;
    }

    .a_title {
        color: #FF8906;
        font-size: 25px;
        font-weight: 600;
    }

    .a_right span:nth-child(2) {
        color: #FF8906;
        font-size: 15px;
        font-weight: 700;
    }

    .a_right span:nth-child(1) {
        font-size: 15px;
        font-weight: 700;
    }

    .n {
        font-size: 15px;
    }

    .title {
        font-size: 24px;
        margin-top: 26px;
    }

    .a_item {
        width: 90vw;
        height: 44px;
        border-radius: 12px;
        background: rgba(228, 227, 227, 0.50);
        margin: 20px auto;
        padding: 13px;
        box-sizing: border-box;
    }

    .a_item span {
        font-size: 13px;
    }

    .a_item img {
        width: 24px;
        height: 18px;
    }
</style>


</html>